<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电器 - 冰箱</title>
    <link rel="stylesheet" href="./css/animate.css"/>
    <link rel="stylesheet" href="./css/font-awesome.min.css"/>
    <link rel="stylesheet" href="./css/flexslider.css"/>
    <link rel="stylesheet" href="./css/base.css"/>
</head>
<body>

<!-- header 顶部 -->
<header>
    <a href="./"><img src="./images/logo.png" alt=""/>淘划算 - 未来商店</a>
    <span class="right">
        <form>
            <input type="text" class="headInput" placeholder="输入商品名称"/><input type="button" class="headBtn" value="搜索"/>
        </form>
    </span>
</header>


<div class="road">
    <a href="javascript:history.back(-1)"><i class="fa fa-angle-left"></i></a>
    电器 > 冰箱
    <hr/>
</div>

<div class="fliterWrap">
    <div class="panel">
        <div class="panel-heading">
            共显示<b>2977</b>款相关产品
        </div>
        <div class="panel-body">
            <ul class="fliterUl">
                <li><label>品牌：</label>

                    <p>
                        <a href="#" class="active">海尔</a><a href="#">美的</a><a href="#">康佳</a><a href="#">创维</a><a
                            href="#">海尔</a><a href="#">美的</a><a href="#">康佳</a><a href="#">创维</a>
                    </p>
                </li>
                <li><label>箱门结构：</label>

                    <p>
                        <a href="#">双门式</a><a href="#">三门式</a><a href="#">单门式</a><a href="#">多门式</a><a
                            href="#">对开双门式</a>
                    </p>
                </li>
                <li><label>最大容积：</label>

                    <p>
                        <a href="#">60升及以下</a><a href="#">61-120升</a><a href="#">121-200升</a><a href="#">201-250升</a><a
                            href="#">251-300升</a><a href="#">301升及以上</a>
                    </p>
                </li>
                <li><label>筛选条件：</label>

                    <p>
                        <a href="#">制冷方式</a><a href="#">能效等级</a><a href="#">制冷控制系统</a>
                    </p>
                </li>

            </ul>

        </div>
    </div>

    <div class="sort">
        <a href="javascript:;" class="active">销量</a>
        <a href="javascript:;">价格从低到高</a>
        <a href="javascript:;">价格从高到低</a>
    </div>

</div>


<!-- 商品列表 -->
<div class="goodList">
    <ul id="listView"></ul>
    <a href="javascript:;" class="showMore" onclick="showMore(10)">点击加载更多>></a>
</div>


<script src="./js/jquery.min.js"></script>
<script>
    $(function () {
        $(".fliterUl li p a").click(function () {
            if ($(this).hasClass("active")) {
                $(this).removeClass("active");
            } else {
                $(this).siblings("a").removeClass("active").end().addClass("active");
            }
        });

        $(".sort a").click(function () {
            $(this).siblings("a").removeClass("active").end().addClass("active");
        });

        for (var i = 1; i <= 15; i++) {
            $("#listView").append("<li class=\"goodItem\"><a href=\"#\"><img src=\"./images/pic1.jpg\" alt=\"商品名称\"/><p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p></a></li>")
        }
    });

    function showMore(count){
        for (var i = 1; i <= count; i++) {
            $("#listView").append("<li class=\"goodItem\"><a href=\"#\"><img src=\"./images/pic1.jpg\" alt=\"商品名称\"/><p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p></a></li>")
        }
    }

</script>
</body>
</html>